<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>插值表达式</title>
  </head>
  <body>
    <div id="app">
      <!-- 1、基本渲染 -->
      <h1>{{ message }}</h1>

      <!-- 2、字符串相加 -->
      <h2>{{ str1 + '----' + str2 }}</h2>

      <!-- 3、三元表达式 -->
      <h3>{{ num1 === 100 ? 'num1等于100' : 'num1不等于100' }}</h3>

      <!-- 4、数值计算 -->
      <h4>结果：{{ num2 * 4 }}</h4>

      <!-- 5、使用 methods 中的方法 -->
      <p>{{ getVal() }}</p>
    </div>

    <script src="./lib/vue_v2.6.14.js"></script>
    <script>
      const app = new Vue({
        el: '#app',
        data: {
          message: 'hello world',
          str1: 'hello',
          str2: 'Vue',
          num1: 100,
          num2: 200
        },
        methods: {
          getVal() {
            return '你好啊!';
          }
        }
      });
    </script>
  </body>
</html>
